<template>
	<view class="user-avatar" :style="{
			'width':size + 'rpx',
			'height':size + 'rpx',
		}">
		<img class="user-avatar-image" :style="{
			borderRadius:radius,
			borderColor:borderColor
		}" :src="src" mode=""></img>
		<view class="user-avatar-real" v-if="realIcon">
			<img class="user-avatar-real-image" src="@/static/user_real.png" mode="">
			</img>
		</view>

		<view class="user-gender" v-if="showGender" :class="AvatarClass">
			<wd-icon class="user-gender-icon user-gender-male-color" name="gender-male" />
			<text v-if="year"> {{ Age}}</text>
		</view>


		<view class="user-identity">

		</view>
	</view>
</template>

<script setup>
	import Dayjs from 'dayjs'
	import {
		defineProps,
		computed
	} from 'vue';

	const Props = defineProps({

		showGender: {
			type: Boolean,
			default: false
		},
		year: {
			type: Number,
			default: 2
		},
		gender: {
			type: Number,
		},
		border: {
			type: Boolean,
			default: false
		},
		borderColor: {
			type: String,
			default: "transparent"
		},
		src: {
			type: String,
			default: ""
		},
		size: {
			type: Number,
			default: 40
		},
		radius: {
			type: String,
			default: "20rpx"
		},
		realIcon: {
			type: Boolean,
			default: false
		}
	})
	
	const AvatarClass = computed(()=>{
		let Border = Props.border 
		let ClassList = []
		if(Border){
			ClassList.push("user-avatar-border")
		}
		ClassList.push(...GenderClass.value)
		return ClassList
	})
	const GenderClass = computed(()=>{
		let Gender = Props.gender 
		let classList = [] 
		if(Gender == 1){
			classList.push("user-gender-boy")
		}else if(Gender == 2){
			classList.push("user-gender-girl")
		}
		return classList
	})
	const Age = computed(() => {
		// 当前时间戳
		let currentDate = Dayjs()
		// 当前时间年份
		let currentYear = currentDate.year()
		let Year = Props.year
		return currentYear - Year
	})
</script>

<style scoped>
	.user-avatar {
		position: relative;
		display: flex;
		align-items: center;
	}
	.user-avatar-image {
		width: 100%;
		height: 100%;
	}
	
	.user-avatar-border {
		border: 3px solid transparent;
	}
	.user-gender {
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		padding: 2rpx 10rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		font-size: 18rpx;
		border-radius: 18rpx;
		letter-spacing: 1px;
	}
	.user-gender-boy {
		color: #068dec;
		background:rgb(167 225 255);
	}
	.user-gender-girl {
		color: #dd0335;
		background: rgb(255 139 209);
	}
	.user-avatar-real {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: -15rpx;
		bottom: -5rpx;
	}
	.user-avatar-real-image {
		width: 100%;
		height: 100%;
	}
	.user-identity {
		height: 0rpx;
		width: 100%;
		background-color: red;
	}
</style>